<template>
  <div class="selectServiceContainer">
    <!-- 头部 -->
    <city-header :title="title"></city-header>
    <!-- 车辆信息 -->
    <router-link to="/home/userCar" class="selectCar">
      <img class="caricon" :src="car.url" alt />
      <p>
        <span>{{car.name}} - {{car.carCc}}</span>
        <img src="../../images/点击进入.png" alt />
      </p>
    </router-link>
    <!-- 服务信息 -->
    <mt-navbar v-model="selected" class="selected">
      <div class="mint-tab-item" v-show="!flag2">
        <div class="mint-tab-item-label default">美容洗车</div>
      </div>
      <mt-tab-item id="美容洗车" v-show="flag2">美容洗车</mt-tab-item>
      <mt-tab-item id="保养养护">保养养护</mt-tab-item>
      <mt-tab-item id="轮胎服务">轮胎服务</mt-tab-item>
      <mt-tab-item id="钣金喷漆" v-show="!flag3">钣金喷漆</mt-tab-item>
      <div class="mint-tab-item" v-show="flag3">
        <div class="mint-tab-item-label default">钣金喷漆</div>
      </div>
    </mt-navbar>
    <!-- 服务列表 -->
    <div class="selectServiceItems">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="美容洗车">
          <div class="serviceItem" v-for="(item,key) in services.美容洗车" :key="key">
            <h1>{{key}}</h1>
            <div
              class="service"
              v-for="(innerItem,index) in item"
              :key="innerItem.id"
              @click="setActive(key,index)"
            >
              <span class="ball"></span>
              <img v-show="innerItem.flag" src="../../images/单选选中.png" alt />
              <span class="title">{{innerItem.name}}</span>
              <div>
                <span class="priceIcon">￥</span>
                <span class="price">{{innerItem.price}}</span>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="保养养护">
          <div class="serviceItem" v-for="(item,key) in services.保养养护" :key="key">
            <h1>{{key}}</h1>
            <div
              class="service"
              v-for="(innerItem,index) in item"
              :key="index"
              @click="setActive(key,index)"
            >
              <span class="ball"></span>
              <img v-show="innerItem.flag" src="../../images/单选选中.png" alt />
              <span class="title">{{innerItem.name}}</span>
              <div>
                <span class="priceIcon">￥</span>
                <span class="price">{{innerItem.price}}</span>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="轮胎服务">
          <div class="serviceItem" v-for="(item,key) in services.轮胎服务" :key="key">
            <h1>{{key}}</h1>
            <div
              class="service"
              v-for="(innerItem,index) in item"
              :key="index"
              @click="setActive(key,index)"
            >
              <span class="ball"></span>
              <img v-show="innerItem.flag" src="../../images/单选选中.png" alt />
              <span class="title">{{innerItem.name}}</span>
              <div>
                <span class="priceIcon">￥</span>
                <span class="price">{{innerItem.price}}</span>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="钣金喷漆">
          <div class="serviceItem" v-for="(item,key) in services.钣金喷漆" :key="key">
            <h1>{{key}}</h1>
            <div
              class="service"
              v-for="(innerItem,index) in item"
              :key="index"
              @click="setActive(key,index)"
            >
              <span class="ball"></span>
              <img v-show="innerItem.flag" src="../../images/单选选中.png" alt />
              <span class="title">{{innerItem.name}}</span>
              <div>
                <span class="priceIcon">￥</span>
                <span class="price">{{innerItem.price}}</span>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <!-- 底部结算 -->
    <div class="seleceServiceFoot">
      <div class="left" @click="openChoosedServices">
        <img v-show="!flag1" src="../../images/点击展开.png" alt />
        <img v-show="flag1" src="../../images/点击关闭.png" alt />
        <span class="choosed">已选</span>
      </div>
      <span class="ball">
        <span class="count">{{currentNum}}</span>
      </span>
      <div class="right">
        <span @click="goStoreList">选择门店</span>
      </div>
    </div>
    <!-- 已选服务内容 -->
    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @leave="leave"
      @afterLeave="afterLeave"
    >
      <div class="choosedServices" v-show="flag1">
        <div class="choosedServices-header">
          <h1>已选项目</h1>
          <span class="services-clear" @click="clearCurrentSerivces">清空</span>
        </div>
        <div class="choosedServices-foot">
          <div class="choosedServices-item" v-for="item in currentServices" :key="item.id">
            <span>{{item.name}}</span>
            <div class="choosedServices-item-right">
              <span class="service-priceIcon">￥</span>
              <span class="service-price">{{item.price}}</span>
              <img @click="clearServiceItem(item.id)" src="../../images/垃圾桶.png" alt />
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 遮罩层 -->
    <transition name="my">
      <div class="shadow" :class="{shadowOpacity:flag1}" v-show="flag1" @click="closeSerivces"></div>
    </transition>

    <div class="small-services" v-show="false">
      <div class="service-Item">
        <div class="service-item">
          <div class="service-item-left">
            <span class="title">雪佛龙金富力方程式机油5W-30(4L)</span>
            <span class="price-Icon">￥</span>
            <span class="price1">200</span>
          </div>
          <span class="serviceCount">×1</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CityHeader from "../city/components/CityHeader.vue";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "选择服务",
      selected: "",
      services: {},
      car: {},
      flag: "",
      flag1: false,
      flag2: true,
      flag3: false
    };
  },
  computed: {
    ...mapState({
      currentCar: "car"
    }),
    ...mapState({
      currentService: "service"
    }),
    ...mapState({
      currentNum: "num"
    }),
    ...mapState({
      currentServices: "choosedServices"
    }),
    ...mapState({
      currentChoosedServices: "choosedServicesName"
    })
  },
  components: {
    CityHeader
  },
  activated() {
    this.getServices();
    this.getActiveCar();
  },
  methods: {
    getServices() {
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.services = result.body.services;
        }
      });
    },
    getActiveCar() {
      this.currentCar.some((item, index) => {
        if (item.imgActive) {
          this.car = this.currentCar[index];
          //console.log(this.car);
        }
      });
    },
    setActive(key, index) {
      //获得已选服务数量  并把最新的数据传递到state  再返回已选服务名称
      for (let i in this.services) {
        if (this.services[i][key] !== undefined) {
          if (this.services[i][key][index].flag === "true") {
            this.services[i][key][index].flag = "";
          } else {
            this.services[i][key].some(item => {
              item.flag = "";
            });
            this.services[i][key][index].flag = "true";
          }
        }
      }
      this.$store.commit("getServicesNum", this.services);
      this.$store.commit("getChoosedServices", this.services);
      //美容洗车和钣金喷漆  2选1
      if (this.currentChoosedServices.indexOf("美容洗车") > -1) {
        this.flag3 = true;
      } else {
        this.flag3 = false;
      }
      if (this.currentChoosedServices.indexOf("钣金喷漆") > -1) {
        this.flag2 = false;
      } else {
        this.flag2 = true;
      }
    },
    openChoosedServices() {
      // if (this.currentNum === 0) {
      //   this.flag1 = false;
      // }
      // if (
      //   this.flag1 === false &&
      //   this.currentServices.length !== this.currentNum
      // ) {
      //   this.$store.commit("getChoosedServices", this.services);
      // } else {
      //   this.flag1 = !this.flag1;
      // }
      if (this.currentNum === 0) {
        this.flag1 = false;
      } else {
        this.$store.commit("getChoosedServices");
        this.flag1 = !this.flag1;
      }
    },
    closeSerivces() {
      this.flag1 = false;
    },
    clearCurrentSerivces() {
      this.flag1 = false;
      for (let i in this.services) {
        for (let n in this.services[i]) {
          for (let index in this.services[i][n]) {
            this.services[i][n][index].flag = "";
          }
        }
      }
      // console.log(this.services);
      this.$store.commit("getServicesNum", this.services);
      this.$store.commit("getChoosedServices");
      this.flag3 = false;
      this.flag2 = true;
    },
    clearServiceItem(id) {
      for (let i in this.services) {
        for (let n in this.services[i]) {
          for (let index in this.services[i][n]) {
            if (this.services[i][n][index].id === id) {
              //console.log(this.services[i][n][index].id);
              this.services[i][n][index].flag = "";
            }
          }
        }
      }
      this.$store.commit("getServicesNum", this.services);
      this.$store.commit("getChoosedServices");
      if (this.currentNum === 0) {
        this.flag1 = false;
        this.flag3 = false;
        this.flag2 = true;
      }
    },
    goStoreList() {
      this.$store.commit("getChoosedServices");
      this.$router.push("/store");
    },
    beforeEnter(el) {
      el.style.bottom = "-230.5px";
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.bottom = "45px";
      el.style.transition = "all 0.5s ease";

      //done();
    },
    afterEnter(el) {
      //this.flag = true;
    },
    beforeLeave(el) {
      el.style.bottom = "45px";
      el.style.transform = "translate(0,0)";
    },
    leave(el, done) {
      el.offsetWidth;
      el.style.bottom = "-230.5px";
      el.style.transition = "all 0.5s ease";

      //done();
    },
    afterLeave() {}
    // leaveCancelled() {
    //   this.flag = false;
    // }
  },
  watch: {
    currentService: {
      handler(newVal, oldVal) {
        this.selected = newVal;
      }
    }
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.selectServiceContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  .selectCar {
    height: 45px;
    display: flex;
    background-color: #ffffff;
    border-bottom: 0.5px solid #e4e4e4;
    .caricon {
      height: 20.5px;
      margin: 12px 8.5px 12.5px 20px;
      vertical-align: middle;
    }
    p {
      font-size: 0;
      line-height: 45px;
      span {
        line-height: 12px;
        font-size: 12px;
        color: #333333;
        vertical-align: middle;
      }
      img {
        position: absolute;
        right: 15.5px;
        margin-top: 17px;
      }
    }
  }
  .mint-navbar {
    height: 45px;
    background-color: #ffffff;
    padding: 0 20px;
    justify-content: space-between;
    .mint-tab-item {
      display: block;
      padding: 0;
      padding: 15.5px 0;
      flex: 0;
      width: 56px;
      margin: 0;
      .mint-tab-item-label {
        font-size: 14px;
        width: 56px;
        font-weight: bold;
      }
      .default {
        color: #cccccc;
      }
    }
  }
  .selectServiceItems {
    flex: 1 1;
    padding: 16px;
    overflow: scroll;
    .serviceItem {
      padding: 16px;
      background-color: #ffffff;
      border-radius: 18px;
      font-size: 0;
      margin-bottom: 16px;
      h1 {
        font-size: 14px;
        color: #333333;
        margin: 0;
        margin-bottom: 6px;
      }
      .service {
        height: 35px;
        line-height: 35px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -7.5px;
        }
        span {
          display: inline-block;
          font-size: 14px;
          line-height: 15px;
          vertical-align: middle;
        }
        .ball {
          width: 15px;
          height: 15px;
          border-radius: 100%;
          border: 0.5px solid rgb(161, 159, 159);
        }
        .title {
          //width: 134.5px;
          position: absolute;
          left: 23px;
        }
        .priceIcon {
          font-size: 10px;
          font-weight: bold;
        }
        .price {
          font-weight: bold;
        }
      }
    }
  }
  .seleceServiceFoot {
    z-index: 6;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    height: 49px;
    background-color: #333333;
    .left {
      padding-left: 16px;
      color: #ffffff;
      font-size: 0;
      img {
        vertical-align: middle;
        margin-right: 9px;
      }
      .choosed {
        font-size: 12px;
        vertical-align: middle;
      }
    }
    .ball {
      display: inline-block;
      width: 16.5px;
      height: 16.5px;
      border-radius: 100%;
      background-color: #fe7300;
      position: absolute;
      left: 65.5px;
      top: 9.5px;
      .count {
        width: 15px;
        position: absolute;
        font-size: 12px;
        line-height: 12px;
        color: #ffffff;
        left: 50%;
        margin-left: -7.5px;
        top: 50%;
        margin-top: -6px;
        text-align: center;
      }
    }
    .right {
      text-align: center;
      width: 104px;
      height: 49px;
      line-height: 49px;
      background-color: #a1171b;
      color: #ffffff;
      font-size: 14px;
    }
  }
  .choosedServices {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    width: 100%;
    max-height: 230.5px;
    bottom: -230.5px;
    z-index: 2;
    .choosedServices-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      line-height: 44px;
      font-size: 0;
      border-bottom: 0.5px solid #e4e4e4;
      padding: 0 24px;
      h1,
      span {
        font-size: 14px;
        color: #333333;
        margin: 0;
      }
    }
    .choosedServices-foot {
      overflow: scroll;
      padding: 0 24px;
      .choosedServices-item {
        display: flex;
        justify-content: space-between;
        height: 44px;
        line-height: 44px;
        font-size: 0;
        span {
          font-size: 14px;
          color: #333333;
        }
        .choosedServices-item-right {
          img {
            width: 14px;
            vertical-align: middle;
          }
          .service-priceIcon {
            font-size: 10px;
            font-weight: bold;
            vertical-align: middle;
          }
          .service-price {
            font-weight: bold;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: #000000;
    //opacity: 0.6;
    //display: none;
  }
  .shadowOpacity {
    opacity: 0.6;
  }
  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 2px solid #283c79;
    color: #283c79;
  }
  a {
    color: #333333;
  }
}

.my-enter {
  //页面起始状态
  opacity: 0;
  //transform: translateX(100%);
}
.my-enter-to {
  opacity: 0.6;
}
.my-leave {
  opacity: 0.6;
}
.my-leave-to {
  //页面终止状态
  opacity: 0;
  //transform: translateX(-100%);
  // position: absolute;
}
.my-enter-active {
  transition: all 0.8s ease;
}
.my-leave-active {
  transition: all 0.5s ease;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.appcontainer[data-v-ec61c590] {
  padding: 0;
  height: 100%;
}
</style>